<template>
  <div class="fssc-page-view">
    <slot name="title"></slot>
    <div class="tabs-box">
      <slot name="tabBar"></slot>
    </div>

    <div class="fssc-page-form-content" :class="{ '__hide_form': !isExtend }">
      <slot name="form"></slot>
    </div>
 
    <div class="fssc-page-view-option" v-if="slots.option">
      <div class="fssc-page-view-option-btn">
        <slot name="option"></slot>
      </div>

    </div>
    <div class="fssc-page-table-content" ref="FsscPageTableRef">
      <slot name="table" :tableHeight="tableHeight"></slot>
    </div>
    <slot />
    <template>
      <!-- <Teleport to="#extendModel" v-if="isShowExtend && curShowModel">
        <div class="fssc-page-view-option-extend" @click="extendChange">
          <div style="flex:1"></div>
          <div class="search-img"> <img src="./images/arrow.png" alt="" :class="{ '__collaps': !isExtend }">
            <span> {{ isExtend ? '折叠搜索' : '折叠搜索' }}</span>
          </div>


        </div>
      </Teleport> -->
    </template>
  </div>
</template>
<script>
import { nextTick, onActivated, onDeactivated, onMounted, onUnmounted, reactive, toRefs, useSlots } from 'vue'

export default {
  name: 'pageView',
  autoImport:true,
  props: {
    isShowTabBar: {
      type: Boolean,
      default: false
    },
    isShowExtend: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {


    const state = reactive({
      isExtend: true,
      FsscPageTableRef: null,
      tableHeight: null,
      tabBarHeight: 56,
      curShowModel: false
    })
    const slots = useSlots()
    const methods = {
      calcHeight: () => {
        setTimeout(() => {
          nextTick(() => {
            try {
              let tableDomTop = state.FsscPageTableRef.getBoundingClientRect().top
              if (props.isShowTabBar) {
                // tableDomTop += (state.tabBarHeight - state.tabBarRef.clientHeight || 0)
              }
              let tableHeight = window.innerHeight - tableDomTop - 74
              state.tableHeight = tableHeight
              console.log(state.tableHeight, '@@', tableDomTop)
            } catch (err)  {
              console.log(err)
            }
          
          
          
          })

        }, 250)
      }
    }
    const handle = {
      extendChange() {
        state.isExtend = !state.isExtend
        methods.calcHeight()
      }
    }
    onMounted(() => {

      methods.calcHeight()
      window.onresize = () => {
        console.log('重置')
        methods.calcHeight()
      }
      state.curShowModel = true
    })
    onUnmounted(() => {
      state.curShowModel = false
    })
    onActivated(() => {
      state.curShowModel = true
    })
    onDeactivated(() => {
      state.curShowModel = false
    })
    return {
      ...handle,
      slots,
      ...toRefs(state),
     
    }
  },
}
</script>
<style lang="scss">
.fssc-page-view {
  overflow-y: auto;
  // padding-bottom: 10px;
  background: #fff;

  .fssc-page-view_header {
    display: flex;
    align-items: center;
    padding-left: 19px;
    width: 100%;
    height: 56px;
    font-size: 18px;
    font-weight: 600;
    color: #262626;
    background: #fff;
    border-bottom: 1px solid #d9d9dd
  }

  .fssc-page-view-option {
    display: flex;
    justify-content: space-between;
    margin-bottom: 17px;
    padding: 0 33px;
    background: #fff;
  }


  .fssc-page-form-content {
    transition: all .2s linear;
    height: auto;
    margin-top: 18px;
    padding: 0 33px;
  }

  .__hide_form {
    height: 0;
    overflow: hidden;
  }

  .fssc-page-table-content {
    padding: 0 33px;
  }

  #rebuis-searchBox {
    margin: 0;
    padding: 0;

    .el-form--inline .el-form-item {
      margin-right: 10px;
    }

    .el-form-item {
      width: 180px;
    }

    .__ui_date_range {
      width: 370px
    }
  }
}

.tabs-box {
  padding-left: 33px;
}

.fssc-page-view-option-extend {
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: flex-end;
  cursor: pointer;

  .search-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 102px;
    height: 26px;
    position: relative;
    right: -20px;

    border-radius: 2px;

    &:hover {
      background: #FFFFFF;
    }

    &:active {
      background: #F8FAFC;
    }

    img {
      margin-left: 6px;
      width: 16px;
      height: 16px;
      // transform: rotate(180deg);
      // transition: transform linear .2s;
      margin-right: 3px;
      margin-top: 1px;
    }

    span {
      color: #39404E;
      font-size: 14px;
    }

    .__collaps {
      transform: rotate(180deg) !important;
    }
  }

}
</style>
